import React, { Component, useEffect } from 'react';
import * as echarts from 'echarts';
import { Table } from 'antd';

import { LineChart } from 'echarts/charts';

import './home.scss'
import { useState } from 'react';
function Home() {
    const columns = [
        {
          title: '日期',
          dataIndex: 'name',
          render: (text) => <a>{text}</a>,
        },
        {
          title: '人数',
          className: 'column-money',
          dataIndex: 'money',
          align: 'right',
        },
          {
            title: '类别',
            dataIndex: 'address',
          },
      ];
      const data = [
        {
          key: '1',
          name: '2022.03.01',
          address: '老师',
          money: '11',
        },
        {
          key: '2',
          name: '2022.3.09',
          address: '学生',
          money: '3',
        },
        
      ];
    var myChart
    const [option, setOption] = useState({
        title: {
            text: '访客变化记录表'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['前七天总数', '近七天外来人员', '近七天来访老师', '近七天来访学生']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '前七天总数',
                type: 'line',
                stack: 'Total',
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: '近七天外来人员',
                type: 'line',
                stack: 'Total',
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: '近七天来访老师',
                type: 'line',
                stack: 'Total',
                data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
                name: '近七天来访学生',
                type: 'line',
                stack: 'Total',
                data: [320, 332, 301, 334, 390, 330, 320]
            },

        ]
    })
    useEffect(() => {
        myChart = echarts.init(document.getElementById('main'));
        myChart.setOption(option)
    })
    return (<div className='bigbox'>
        <div className='top'>
            <div className='littlebox'>
                <div className='tubiao'>
                    <div className="title">今日访客</div>
                    <div className="fonts">0</div>
                </div>
                <div className='one'>
                    <p>待审核：0人</p>
                    <p className='tong'>未通过：0 人
                        已取消：0 人</p>
                </div>
            </div>
            <div className='littlebox'>
                <div className='tubiao' style={{ backgroundColor: 'rgb(250, 88, 34)' }}>
                    <div className="title">今日访客</div>
                    <div className="fonts">0</div>
                </div>
                <div className='one'>
                    <p>待审核：0人</p>
                    <p className='tong'>未通过：0 人
                        已取消：0 人</p>
                </div>
            </div>
            <div className='littlebox'>
                <div className='tubiao' style={{ backgroundColor: 'rgb(0, 151, 137)' }}>
                    <div className="title">今日访客</div>
                    <div className="fonts">0</div>
                </div>
                <div className='one'>
                    <p>待审核：0人</p>
                    <p className='tong'>未通过：0 人
                        已取消：0 人</p>
                </div>
            </div>
            <div className='littlebox'>
                <div className='tubiao' style={{ backgroundColor: 'rgb(247, 184, 36)' }}>
                    <div className="title">今日访客</div>
                    <div className="fonts">0</div>
                </div>
                <div className='one'>
                    <p>待审核：0人</p>
                    <p className='tong'>未通过：0 人
                        已取消：0 人</p>
                </div>
            </div>
            <div className='littlebox'>
                <div className='tubiao' style={{ backgroundColor: 'rgb(48, 65, 86)' }}>
                    <div className="title">今日访客</div>
                    <div className="fonts">0</div>
                </div>
                <div className='one'>
                    <p>待审核：0人</p>
                    <p className='tong'>未通过：0 人
                        已取消：0 人</p>
                </div>
            </div>
        </div>
        <div className="center">
            <div id="main" children className="visitorRecordDiagram"></div>
        </div>
        <div className='detail'>
            <div className='detailtop'>
                <span>
                    本周详情
                </span>
                <div>

                </div>
            </div>
            <div className="detailbody">
                <div className="item-box">
                    <span>本周人员统计表：</span>
                     <Table
                        columns={columns}
                        dataSource={data}
                        bordered
                       pagination={false}
                    />
                </div>
                <div className="item-box">
                <span>本周人员统计表：</span>
                     <Table
                        columns={columns}
                        dataSource={data}
                        bordered
                       pagination={false}
                    />
                </div>
            </div>
        </div>
    </div>);
}

export default Home;